<div class="modal-header page">
    <h3 ng-if="isNewEvent">{{'add_new_event_for_stage'| translate}}<span ng-if="model.selectedStage" class="bold"> {{model.selectedStage.displayName}}</span></h3>
    <h3 ng-if="isScheduleEvent && !isReferralEvent">{{'schedule_new_event_for_stage'| translate}}<span ng-if="model.selectedStage" class="bold"> {{model.selectedStage.displayName}}</span></h3>
    <h3 ng-if="isReferralEvent">{{'refer_new_event_for_stage' | translate}}<span ng-if="model.selectedStage" class="bold"> {{model.selectedStage.displayName}}</span></h3>
</div>
<div class="modal-body page">    
    <form name="eventCreationForm" class="form-horizontal" novalidate>
        <table class="dhis2-list-table-striped default-form-table" ng-if="model.selectedStage">
            <tr ng-if="!stageSpecifiedOnModalOpen && !suggestedStage.id">
                <td>
                    {{'program_stage' | translate}}
                </td>
                <td class="absorbing-column">
                    <ui-select ng-model="model.selectedStage">
                        <ui-select-match>{{$select.selected.displayName}}</ui-select-match>
                        <ui-select-choices repeat="stage in stages" ui-disable-choice="!stage.access.data.write">
                            <span>{{stage.displayName}} <span ng-if="!stage.access.data.write"> ({{'read_only' | translate}})</span></span>
                        </ui-select-choices>
                    </ui-select>
                    <!--<select class="form-control" 
                            id="programStage"
                            ng-model="model.selectedStage"                                
                            ng-options="stage.displayName for stage in stages">                    
                    </select>-->
                </td>
            </tr>
            
            <tr ng-if="selectedProgram.categoryCombo && !selectedProgram.categoryCombo.isDefault && selectedProgram.categoryCombo.categories"
                ng-repeat="category in selectedProgram.categoryCombo.categories">
                <td>
                    {{category.displayName}}
                </td>
                <td>
                    <ui-select ng-model="category.selectedOption"                                        
                        theme="select2"  
                        on-select="getCategoryOptions()"
                        style="width:100%;">
                        <ui-select-match allow-clear="true" class="form-control-ui-select" ng-attr-placeholder="{{category.categoryOptions && category.categoryOptions.length > 0 ? 'select_or_search' : 'empty'| translate}}">{{$select.selected.displayName|| $select.selected}}</ui-select-match>
                        <ui-select-choices  repeat="option in category.categoryOptions | categoryOptionFilter:selectedOrgUnit | filter:{displayName:$select.search} | limitTo:maxOptionSize">
                            <span ng-bind-html="option.displayName | highlight: $select.search"></span>
                        </ui-select-choices>
                    </ui-select>
                    <!--<select class="form-control"
                            name="option"
                            ng-model="category.selectedOption"
                            ng-options="option as option.displayName for option in category.categoryOptions"
                            ng-change="getCategoryOptions()">
                        <option ng-attr-value="" ng-selected="selectDefault.selected">{{'please_select' | translate}}</option>
                    </select>-->
                </td>
            </tr>
            
            <tr ng-if="isScheduleEvent && !isReferralEvent && !model.selectedStage.hideDueDate && !model.selectedStage.periodType">
                <td>
                    {{model.selectedStage.dueDateLabel}}
                </td>
                <td class="absorbing-column">
                    <input type="text" 
                           class="form-control" 
                           name="dueDate"
                           id="dueDate"
                           ng-attr-placeholder="{{dhis2CalendarFormat.keyDateFormat}}" 
                           ng-rquired="true" 
                           d2-date
                           d2-date-validator 
                           ng-model="dhis2Event.dueDate">
                    <div ng-messages="eventCreationForm.dueDate.$error" ng-if="interacted(eventCreationForm.eventDate)" class="required" ng-messages-include="../dhis-web-commons/angular-forms/error-messages.html">                        
                    </div>
                </td>
            </tr>            
            <tr ng-if="isNewEvent && !model.selectedStage.periodType">
                <td>
                    {{model.selectedStage.executionDateLabel}}
                </td>
                <td class="absorbing-column">
                    <input type="text" 
                           class="form-control" 
                           id="eventDate"
                           name="eventDate"
                           ng-attr-placeholder="{{dhis2CalendarFormat.keyDateFormat}}" 
                           ng-rquired="true" 
                           d2-date
                           d2-date-validator 
                           max-date="0"
                           min-date=""
                           ng-model="dhis2Event.eventDate">
                    <div ng-messages="eventCreationForm.eventDate.$error" ng-if="interacted(eventCreationForm.eventDate)" class="required" ng-messages-include="../dhis-web-commons/angular-forms/error-messages.html">                        
                    </div>
                </td>
            </tr>            
            <tr ng-if="model.selectedStage.periodType">
                <td>
                    {{'period'| translate}}
                </td>
                <td class="absorbing-column">
                    
                    <span class="input-group">
                        <select class="form-control" 
                                id="period"
                                ng-model="dhis2Event.selectedPeriod"
                                ng-options="period.name for period in periods">
                        </select>
                        <span class="input-group-btn">
                            <button type="button"
                                    class="btn btn-default trim" 
                                    ng-disabled="periodOffset <= referenceOffset" 
                                    ng-click="fetchPeriod('PREV')" 
                                    ng-attr-title="{{'prev_period'| translate}}">
                                <i class="fa fa-backward"></i>
                            </button>
                            <button type="button" 
                                    class="btn btn-default trim" 
                                     ng-disabled="isNewEvent && hasFuturePeriod" 
                                    ng-click="fetchPeriod('NEXT')" 
                                    ng-attr-title="{{'nxt_period'| translate}}">
                                <i class="fa fa-forward"></i>
                            </button>                                    
                        </span>
                    </span>
                    
                </td>
            </tr>            
        </table>
        
        <div ng-if="model.selectedStage && !model.selectedStage.periodType">
            <div class="row" ng-if="isReferralEvent">
                <h4>{{'org_unit' | translate}}</h4>
                <div class="org-unit-tree row" data-stop-propagation="true">
                    <i class="fa fa-spinner fa-spin fa-2x" ng-show="orgUnitsLoading"></i>
                    <script type="text/ng-template" id="orgUnitTree.html">
                        <span ng-init="initTest(orgUnit)">
                            <span class="org-unit-tree-button" ng-click="expandCollapseOrgUnitTree(orgUnit)" ng-show="orgUnit.show && orgUnit.children.length > 0"><i class="fa fa-minus-square-o"></i></span>
                            <span class="org-unit-tree-button" ng-click="expandCollapseOrgUnitTree(orgUnit)" ng-show="(!orgUnit.show && orgUnit.children.length > 0) || (!orgUnit.show && orgUnit.hasChildren)"><i class="fa fa-plus-square-o"></i></span>
                            <!-- Makes OrgUnits with the selected program selectable, while OrgUnits which do not have the selected program gets grayed out. -->
                            <span class="org-unit-tree-button" ng-show="hasSelectedProgram(orgUnit)" ng-click="setSelectedSearchingOrgUnit(orgUnit)" ng-class="{'selected-org-unit' : orgUnit.id === selectedSearchingOrgUnit.id}">{{orgUnit.displayName}}</span>
                            <span class="org-unit-tree-button" ng-hide="hasSelectedProgram(orgUnit)" style="color: LightGray">{{orgUnit.displayName}}</span>                            
                            <ul class="tree" id="tree" ng-show="orgUnit.show">
                                <li ng-repeat="orgUnit in orgUnit.children | orderBy:'displayName'" ng-include="'orgUnitTree.html'"></li>
                            </ul>
                        </span>
                    </script>
                    <ul class="tree" id="tree" ng-hide="orgUnitsLoading">
                        <li ng-repeat="orgUnit in searchOrgUnitTree | orderBy:'name'" ng-include="'orgUnitTree.html'"></li>
                    </ul>
                </div>
                <div class="alert alert-warning" ng-if="orgUnitError"><span>Please select an organization unit</span></div>
                <hr/>
                <div class="input-group">
                    <label for="referralDueDate"><strong>{{dhis2Event.executionDateLabel}}</strong></label>
                    <input type="text" 
                       ng-attr-placeholder="{{dhis2CalendarFormat.keyDateFormat}}"
                       id="referralDueDate"
                       name="dueDate"
                       d2-date
                       d2-date-validator
                       class="form-control"
                       ng-model="dhis2Event.dueDate"                                    
                       ng-required="true"
                       />
                </div>
                <br/>
                <span ng-if="model.dueDateInvalid" class="error">{{'required'| translate}}</span>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer page" ng-if="!isReferralEvent">        
    <button ng-disabled="lockButton" class="btn btn-primary" data-ng-click="save()">{{'save'| translate}}</button>
    <button class="btn btn-default" data-ng-click="cancel()">{{'cancel'| translate}}</button>
</div>
<div class="modal-footer page" ng-if="isReferralEvent">        
    <button class="btn btn-primary" data-ng-click="onetimeReferral()">{{'onetime_referral'| translate}}</button>
    <button class="btn btn-primary" data-ng-click="movePermanently()">{{'move_permanently'| translate}}</button>
    <button class="btn btn-default" data-ng-click="cancel()">{{'cancel'| translate}}</button>
</div>